<template>
	<view class="pages-classify" v-if="isLoad">
		<view class="content flex" :style="{height: '100vh'}">
			<scroll-view class="content_left fill-base" scroll-y>
				<view @tap="speechTabChange(index)" class="left_item rel"
					:style="{background:index==activeIndex?primaryColor:'',color:index==activeIndex?'#fff':''}"
					v-for="(item,index) in list" :key="index">
					<view class="ellipsis text-center f-desc pl-sm pr-sm">{{item.name}}</view>
				</view>
				<view class="space-footer"></view>
			</scroll-view>
			<scroll-view class="content_right pl-md" :class="[{'pt-lg': list[activeIndex].children.length > 0}]"
				scroll-y>
				<abnor v-if="!list[activeIndex].children || list[activeIndex].children.length<=0" :isCenter="true">
				</abnor>
				<view class="flex-warp pb-lg" v-if="list[activeIndex].children">
					<view class="content_right-text flex-center mb-lg fill-base f-desc mr-md" @tap="goClassify(index)"
						:style="{color: childId==item.id?'#fff':'#333',background:item.id==childId?primaryColor:'#fff'}"
						v-for="(item,index) in list[activeIndex].children" :key="index">{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import siteInfo from '@/siteinfo.js';

	export default {
		data() {
			return {
				isLoad: false,
				list: [],
				activeIndex: 0,
				childId: -1
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
		}),
		async onLoad(options) {
			try {
				let {
					form
				} = this.$util.getPage(-1)
			} catch (e) {
				// #ifdef H5
				history.back()
				// #endif
			}
			this.$util.showLoading()
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo']),
			async initIndex(refresh = false) {
				if (!this.configInfo.id || refresh) {
					this.getConfigInfo()
				}
				// #ifdef H5
				if (!refresh) {
					this.$jweixin.hideOptionMenu()
				}
				// #endif
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			async getList() {
				let type_pid = this.$util.getPage(-1).form.type_pid
				let type_id = this.$util.getPage(-1).form.type_id
				let newList = await this.$api.partner.typeList()
				if (type_id) {
					newList.forEach((item, index) => {
						if (item.id == type_pid) {
							this.activeIndex = index
							this.childId = type_id
						}
					})
				}

				this.list = newList
				this.isLoad = true
				this.$util.hideAll()
			},
			async initRefresh() {
				this.$util.showLoading()
				this.initIndex(true)
			},
			toSearch(e) {
				console.log(e)
			},
			goClassify(index) {
				let {
					activeIndex
				} = this
				this.childId = this.list[activeIndex].children[index].id
				this.$util.getPage(-1).form.type_pid = this.list[activeIndex].id
				this.$util.getPage(-1).form.type_id = this.list[activeIndex].children[index].id
				this.$util.getPage(-1).form.type_name = this.list[activeIndex].children[index].name
				this.$util.goUrl({
					url: 1,
					openType: 'navigateBack'
				})
			},
			speechTabChange(index) {
				this.activeIndex = index
			}
		},
	}
</script>


<style lang="scss">
	.pages-classify {
		.item-title {
			line-height: 40rpx;
			height: 80rpx;
		}

		.item-image {
			width: 248rpx;
			height: 219rpx;
		}

		.item-num {
			.item-num-bg {
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				border-radius: 40rpx;
				opacity: 0.1;
			}
		}

		.content_left {
			width: 166rpx;
			overflow: hidden;
		}

		.left_item {
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.content_right {
			width: 564rpx;
		}

		.right_item {
			.item-icon {
				width: 130rpx;
				height: 130rpx;
			}
		}

		.ml-mslg {
			margin-left: 50rpx;
		}

		.right_item:first-child {
			margin-top: 0;
		}

		.content_right-text {
			width: 166rpx;
			height: 60rpx;
			border-radius: 60rpx;
		}
	}
</style>